<template>
  <div class="zilMessage">
    <template v-for="(item, index) in $store.state.msgPool">
      <v-app
        style="min-height: auto !important"
        class="d-flex justify-center"
        transition="slide-y-transition"
        :key="index"
      >
        <template v-if="item.light == true" transition="scale-transition">
          <v-alert dense :type="item.type">{{ item.message }}</v-alert>
        </template>
        <template v-if="item.light == false" transition="scale-transition">
          <v-alert dense :type="item.type" outlined>{{ item.message }}</v-alert>
        </template>
      </v-app>
    </template>
  </div>
</template>
<script>
export default {
  data: () => ({}),
};
</script>

<style  lang="scss">
.zilMessage {
  left: 50%;
  z-index: 9999;
  display: flex;
  position: fixed;
  min-width: 300px;
  max-width: 460px;
  flex-direction: column;
  transform: translateX(-50%);
  .v-application {
    margin-top: 20px;
  }
  .v-application--wrap {
    min-height: auto !important;
  }
  .v-alert {
    margin-bottom: 0;
  }
}
</style>
